<template>
	<div>
	<template v-if="categoryNavs.length > 0">
		<ul class="poem">
			<li v-for="(item) in categoryNavs" @click="active(item.id);activeFun(item.id,item.name)" :class="{active:item.id == indexx}">
				<a>{{item.name}}</a>
				<i :class="{'el-icon-check':item.id == indexx}"></i>
			</li>
		</ul>
	</template>
	<template v-else>
		<i class="el-icon-warning-outline"></i>
		暂无内容
	</template>
	</div>
</template>

<script>
	export default {
		name: "category_nav",
		data(){
			return{
				indexx: null
			}
		},
		props: {
			categoryNavs: {
				type: Array,
			},
			activeFun: {
				type: Function,
			},
		},
		methods:{
			active(id){
				this.indexx = id;
			},
			cancelStyle(){
				this.indexx = null;
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.poem {
		background-color: #FFFFFF;

		li {
			padding: 10px;
			padding-left: 20px;
			cursor: pointer;
			border-left: 3px solid rgba(0, 0, 0, 0);
			a{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 80%;
				display: inline-block;
			}
			&:hover {
				background-color: #f7f7f7;
				border-left-color: #484947
			}
		}

		li.active {
			background-color: #f7f7f7;
			border-left-color: #484947;
			.el-icon-check{
				float: right;
			}
		}
	}

	.poem {
		.el-image {
			height: 240px;

			img {
				object-fit: unset !important;
			}
		}

		font-size: 15px;
	}
</style>
